<template>
	<view class="login-forget-password">
		<view class="title">{{ title }}</view>
		<view class="login-content">
			<view class="account">
				<input class="input-style" type="text" placeholder-class="placeholder-style" placeholder="新密码"
					v-model="password" :password="isPassword_one">
				<image class="image" :src="img_one" mode="widthFix" @click="changeImg(1)"></image>
			</view>
			<u-gap height="1" bgColor="#CDCDCD" marginTop="15"></u-gap>
			<view class="password">
				<input class="input-style-two" type="text" placeholder-class="placeholder-style" placeholder="确认密码"
					v-model="confirmPassword" :password="isPassword_two">
				<image class="image" :src="img_two" mode="widthFix" @click="changeImg(2)"></image>
			</view>
			<u-gap height="1" bgColor="#CDCDCD" marginTop="15"></u-gap>
		</view>
		<view class="login-button">完成</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '重置密码',
				
				/* 重置密码 */
				password: '', // 登录密码
				confirmPassword: '', // 确认登录密码
				
				/* 密码点击显示 */
				img_one: '/static/images/login/hide.png', // 密码显示
				img_two: '/static/images/login/hide.png', // 确认密码显示
				isPassword_one: true, // 是否显示密码
				isPassword_two: true, // 是否显示确认密码
			};
		},
		onLoad(option) {
			console.log(option);
		},
		onShow() {

		},
		methods: {

			/* 更改Img样式 */
			changeImg(option) {
				const show = '/static/images/login/show.png';
				const hide = '/static/images/login/hide.png';
				if (option == 1) {
					if (this.img_one == hide) {
						this.img_one = show;
						this.isPassword_one = false;
					} else {
						this.img_one = hide;
						this.isPassword_one = true;
					};
				} else {
					if (this.img_two == hide) {
						this.img_two = show;
						this.isPassword_two = false;
					} else {
						this.img_two = hide;
						this.isPassword_two = true;
					};
				};
			},
		}
	}
</script>

<style lang="scss">
	.login-forget-password {
		padding: 0 34px;

		.title {
			padding: 10vh 0;
			font-size: 46rpx;
			font-weight: 600;
		}

		.login-content {

			.input-style {
				width: 50vw;
				font-size: 30rpx;
				font-weight: 600;
				line-height: 60rpx;
			}

			.input-style-two {
				width: 45vw;
				font-size: 30rpx;
				font-weight: 600;
				line-height: 60rpx;
			}

			.placeholder-style {
				color: #CDCDCD;
				// line-height: 60rpx;
			}

			.content-title {
				margin-right: 40rpx;
				color: #000000;
				font-size: 34rpx;
				font-weight: 600;
				height: 60rpx;
			}

			.image {
				width: 5vw;
				height: 5vw;
				margin-right: 20rpx;
				cursor: pointer;
			}

			.account {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.password {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.login-button {
			background-color: #000000;
			margin: 5vh 0;
			text-align: center;
			color: #FFFFFF;
			font-size: 34rpx;
			font-weight: 600;
			border-radius: 5px;
			line-height: 80rpx;
			box-shadow: 0px 2px 20px #dedede;
			cursor: pointer;
		}
	}
</style>
